/* 定义全局CSS变量 */
:root {
  --background: white; /* 默认背景色为白色 */
  --foreground: black; /* 默认文字颜色为黑色 */
}

/* 深色模式媒体查询,意思就是根据浏览器主题色自动切换 */
/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #121212; /深灰背景 /
    --foreground: #e0e0e0; / 浅灰文字 /
  }
} */

/* 基础HTML和BODY样式 */
html,
body {
  max-width: 100vw; /* 宽度充满视窗 */
  overflow-x: hidden; /* 隐藏横向滚动条 */
}

/* 主体样式 */
body {
  color: var(--foreground); /* 文字颜色 */
  background: var(--background); /* 背景色 */
  font-family: Arial, Helvetica, sans-serif; /* 字体 */
  -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
  -moz-osx-font-smoothing: grayscale; /* 字体抗锯齿 */
}

/* 全局重置样式 */
* {
  box-sizing: border-box; /* 盒模型 */
  padding: 0;
  margin: 0;
}

/* 链接样式 */
a {
  color: inherit; /* 继承父元素颜色 */
  text-decoration: none; /* 去除下划线 */
}

/* 浅色模式媒体查询 */
@media (prefers-color-scheme: light) {
  html {
    color-scheme: white; /* 设置颜色方案为白色 */
  }
}
